<template>
  <view class="func-grid">
    <view
      v-for="(item, index) in funcList"
      :title="item.title"
      :key="index"
      class="func-item"
      @tap="handleFuncClick(item)"
    >
      <view class="func-icon">
        <view class="chatIcon" :class="item.icon"></view>
      </view>
      <text class="func-title">{{ item.title }}</text>
    </view>

    <!-- <zhuoTiandituSelect ref="tMap" @onSelect="onSelect" :searchType="0" api-key="30ed05cc4d1c8573b0fbb2e4c0b08fed">
    </zhuoTiandituSelect> -->
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
// import zhuoTiandituSelect from "@kingon/tianditu/components/zhuo-tianditu-select/zhuo-tianditu-select.vue";

// const tMap = ref();

const emit = defineEmits(["select"]);

// 功能列表
const funcList = ref([
  // {
  //   icon: "icon-tupian",
  //   title: "相册richText",
  //   type: "richText-album",
  //   contentType: "richText-image",
  // },
  {
    icon: "icon-tupian",
    title: "相册",
    type: "album",
    contentType: "image",
  },
  {
    icon: "icon-xiangji",
    title: "相机",
    type: "camera",
    contentType: "image",
  },
  {
    icon: "icon-yuyin",
    title: "语音",
    type: "voice-btn-show",
    contentType: "voice",
  },
  {
    icon: 'icon-bofang',
    title: '视频',
    type: 'video',
    contentType: "video",
  },
  // {
  //   icon: 'icon-wenjianjia',
  //   title: '文件',
  //   type: 'file'
  //   contentType: "file",
  // },
  // {
  //   icon: "icon-ditu_dingwei",
  //   title: "位置",
  //   type: "location",
  //   contentType: "location",
  // },
  // {
  //   icon: 'icon-jieshaoxinxi',
  //   title: '名片',
  //   type: 'contact'
  // },
]);

if (process.env.NODE_ENV === "development") {
  funcList.value.push(
    {
      icon: "icon-jieshaoxinxi",
      title: "清除会话缓存(调试)",
      type: "debug-clear-conversation",
      contentType: "debug",
    },
    {
      icon: "icon-jieshaoxinxi",
      title: "清除用户缓存(调试)",
      type: "debug-clear-user",
      contentType: "debug",
    },
    {
      icon: "icon-jieshaoxinxi",
      title: "发送名片(测试)",
      type: "debug-test-special-message",
      contentType: "debug",
    },
    {
      icon: "icon-jieshaoxinxi",
      title: "动态更新列表消息(测试)",
      type: "debug-test-dynamic-update-list",
      contentType: "debug",
    }
  );
}

// 点击功能项
const handleFuncClick = async (item: any) => {
  switch (item.type) {
    case "richText-album":
    case "album":
      chooseImage(["album"], item.contentType);
      break;
    case "camera":
      chooseImage(["camera"], item.contentType);
      break;
    case "voice-btn-show":
      emit("select", item);
      break;
    case "video":
      try {
        const res = await uni.chooseVideo({
          compressed: true,
          sourceType: ["album", "camera"],
        });
        if (res.errMsg != "chooseVideo:ok") throw res.errMsg;
        emit("select", {
          type: "video",
          data: res.tempFilePath,
        });
      } catch (error) {
        uni.showToast({
          title: "选择视频失败",
          icon: "none",
        });
      }
      break;

    case "file":
      // #ifdef H5
      try {
        const res = await uni.chooseFile({
          count: 1,
          type: "all",
        });
        emit("select", {
          type: "file",
          data: Array.isArray(res.tempFiles) ? res.tempFiles[0] : res.tempFiles,
        });
      } catch (error) {
        uni.showToast({
          title: "选择文件失败",
          icon: "none",
        });
      }
      // #endif
      break;

    case "location":
      try {
        // tMap.value.open(104.397894, 31.126855);
        const res = await uni.chooseLocation();
        emit("select", {
          type: "location",
          data: res,
        });
      } catch (error) {
        uni.showToast({
          title: "选择位置失败",
          icon: "none",
        });
      }
      break;
    case "debug-clear-conversation":
      clearConversation();
      break;
    case "debug-clear-user":
      clearUser();
      break;
    case "debug-test-special-message":
      testSpecialMessage();
      break;
    case "debug-test-dynamic-update-list":
      testDynamicUpdateList(item);
      break;
    default:
      emit("select", item);
  }
};

// 选择图片
const chooseImage = async (sourceType: string[], emitType: string) => {
  try {
    const result = await uni.chooseImage({
      count: 9,
      sizeType: ["compressed"],
      sourceType: sourceType,
    });
    console.log({ result });
    if (result.errMsg != "chooseImage:ok") throw result.errMsg;
    emit("select", {
      type: emitType,
      data: result.tempFilePaths[0],
    });
  } catch (error) {
    console.error(error);
    uni.showToast({
      title: "选择失败",
      icon: "none",
    });
  }
};

/**
 *  -----------------------------------
 *  调试功能
 *  -----------------------------------
 * */

const onSelect = (value) => {
  console.log("addt", value);
};

// 清除本地会话
const clearConversation = () => {
  console.log("清除本地会话");
  uni.removeStorageSync("__WKIM__serviceChannelList");
  uni.showToast({
    title: "清除本地会话成功, 刷新页面，下次选择客服会重新创建会话",
    icon: "none",
  });
};

// 清除本地用户
const clearUser = () => {
  console.log("清除本地用户");
  uni.removeStorageSync("__WKIM__currentUser");
  uni.showToast({
    title: "清除本地用户成功, 刷新页面，会重新授权新用户",
    icon: "none",
  });
};

// 测试特殊消息
const testSpecialMessage = () => {
  console.log("测试特殊消息");
  emit("select", {
    type: "wecat-info",
    data: {
      url: "公众号图片",
      name: "公众号名称",
      desc: "保存到手机，微信扫一扫关注我们，了解取更多信息",
    },
  });
};

// 动态更新列表消息
const testDynamicUpdateList = (item: any) => {
  emit("select", { type: "debug", data: item });
};
</script>

<style scoped lang="scss">
.func-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  width: 100%;
}

.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;

  .func-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;

    .chatIcon {
      font-size: 60rpx;
      color: #666;
    }
  }

  .func-title {
    font-size: 24rpx;
    color: #666;
    white-space: nowrap;
    max-width: 4em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &:active {
    .func-icon {
      transform: scale(0.9);
    }
  }
}
</style>
